import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout

@Preview
@Composable
fun ConstraintLayoutDemo() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val (topLeft, topRight, bottomLeft, bottomRight, center) = createRefs()

        Text(
            text = "1",
            fontSize = 30.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Red)
                .wrapContentWidth(Alignment.CenterHorizontally)
                .wrapContentHeight(Alignment.CenterVertically)
                .constrainAs(topLeft) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                }
        )

        Text(
            text = "2",
            Modifier
                .size(100.dp)
                .background(color = Color.Red)
                .constrainAs(topRight) {
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                }
        )

        Text(
            text = "3",
            Modifier
                .size(100.dp)
                .background(color = Color.Red)
                .constrainAs(bottomLeft) {
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                }
        )

        Text(
            text = "4",
            Modifier
                .size(100.dp)
                .background(color = Color.Red)
                .constrainAs(bottomRight) {
                    bottom.linkTo(parent.bottom)
                    end.linkTo(parent.end)
                }
        )

        Text(
            text = "5",
            Modifier
                .size(100.dp)
                .offset(x = 50.dp, y = 50.dp)
                .background(color = Color.Red)
                .constrainAs(center) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
        )
    }
}

